<template>
	<div>
		<div class="title">周末游去哪儿</div>
		<ul>
			<li class="item border-bottom" v-for="item of list" :key="item.id">
				<div class="item-img-wrapper">
					<img :src="item.imgUrl" :alt="item.title" class="item-img">
				</div>
				<div class="item-info">
					<p class="item-title">{{item.title}}</p>
					<p class="item-desc">{{item.desc}}</p>
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
export default{
	name:'HomeRecommend',
	props:{
		list:Array
	}
}
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl'
	//.item{touch-action: none;}
	.title{line-height:0.8rem;background:#eee;text-indent:0.2rem;margin-top:0.2rem;}
	.item-img-wrapper{overflow:hidden;height:0;padding-bottom:38.01%;}
	.item-img{width:100%;}
	.item-info{padding:0.1rem;}
	.item-title{line-height:0.54rem;font-size:0.32rem;ellipsis()}
	.item-desc{line-height:0.4rem;color:#ccc;ellipsis()}
</style>